<template>
  <div style="margin-right: 30px">
	  <el-form ref="formObj" :model="myform" :rules="rules" label-width="100px">
		
		<!-- <el-form-item label="当前余额" >
		  <el-input v-model="myform.account" :precision="2" disabled></el-input>
		</el-form-item> -->
		  
	    <el-form-item label="总价" prop="totalAmount">
	      <el-input v-model="myform.totalAmount" :precision="2" disabled></el-input>
	    </el-form-item>
		
	    <el-form-item label="数量" prop="count">
	       <el-input-number v-model="count" :min="1" :max="10" @change="getTotalAmount()" />
	    </el-form-item>
		
	    <!-- <el-form-item v-if="props.cart==0" label="选择收货地址" prop="storeId">
	      <el-radio-group v-model="myform.storeId">
	        <el-radio :value="2">永辉超市</el-radio>
	        <el-radio :value="1">京东便利店</el-radio>
	      </el-radio-group>
	    </el-form-item> -->
		<el-form-item v-if="props.cart==0" label="选择收货地址" >
		      <el-select v-model="myform.address" placeholder="please select your zone">
		        <el-option v-for="item in address" :value="item.detail" @click="setAddressId(item.id,item.detail)" >{{item.detail}}({{item.name}}[{{item.phone}}])</el-option>
		      </el-select>
		    </el-form-item>
		
	    <el-form-item>
	      <el-button v-if="props.cart==0" type="primary" plain :icon="Save" @click="saveorder">提交订单</el-button>
		  <el-button v-else type="primary" plain :icon="Save" @click="savecart">加入购物车</el-button>
	    </el-form-item>
	  </el-form>
  </div>
</template>

<script setup>
import { getCookieForObject,setCookiesFromObject} from '@/util';
import { ElMessage,ElMessageBox } from 'element-plus';
import { ref, reactive } from 'vue'
import router from '@/router';
import { get,post } from '@/plugins/axios'
import { useRouter } from 'vue-router';
// 定义组件可触发的事件：更新显示状态和通过ID获取数据
const emits = defineEmits(['update:show', 'getDataById'])
// 定义组件接收的属性：商品ID、数量、自提点ID、用户ID、单价、是否购物车模式
const props = defineProps(['id','colourid','sizeid','stockid', 'stock','num', 'userId', 'price', 'cart'])

// 定义数量响应式变量，初始值从props.num获取
const count = ref(1)
count.value = props.num
const address =ref([{id:'001',detail:"srhgfdasdfjhgfdfd",name:'dshgsf',phone:'shgfvDx',defult:0},
{id:'002',detail:"7857857575",name:'78575',phone:'787578578',defult:1}])

// 定义表单数据对象（响应式）
const myform = reactive({
	id: null,               // 订单ID（初始为空）
    userId: props.userId,   // 用户ID（从props获取）
	counts: [],             // 商品数量数组（用于批量订单）
	goodsIds: [],           // 商品ID数组（用于批量订单）
	addressId: '', // 收货地址ID（从props获取）
	address: '', // 收货地址（从props获取）
	price: props.price,     // 商品单价（从props获取）
	totalAmount: null,      // 订单总价（计算后赋值）
	//account: null,          // 用户账户余额（从cookie获取）
    cart: props.cart        // 是否购物车模式（从props获取）
})

// 定义表单引用（用于表单验证等操作）
const formObj = ref()

function setAddressId(id,detail){
	myform.addressId=id;
	myform.address=detail;
	console.dir(myform)
}

// 初始化时计算总价
getTotalAmount()

// 计算总价的函数
function getTotalAmount() {
	// 数量乘以单价，保留2位小数
	myform.totalAmount = parseFloat(count.value * myform.price).toFixed(2)
	// 从cookie获取用户信息
	const userinfo = getCookieForObject('user')
	if (userinfo) {
	  // 格式化用户余额为2位小数
	  myform.account = userinfo.account.toFixed(2)
	}
	// 控制台打印表单数据（调试用）
	console.dir(myform)
	//获取用户收货地址列表
	get("/address/getByUserId", { 'user_id': props.userId }, content => {
	  
	  address.value = content;  // 更新商品数据
	});
	for(const key in address.value )
	{
	    if(address.value[key].defult==1)
	    {
	        myform.addressId=address.value[key].id;
			myform.address=address.value[key].detail;
			console.dir(myform.addressId)
	    }
	    
	}
	
}

// 表单验证规则
const rules = reactive({
	// 自提点ID验证：必填，提示信息，触发方式为失焦
	storeId: [
		{ required: true, message: '请选择自提地点', trigger: 'blur' }
	]
})

// 控制台打印表单数据（调试用）
console.dir(myform)

// 提交订单函数
function saveorder() {
  // 将当前商品ID添加到商品ID数组
  myform.goodsIds.push(props.id)
  // 控制台打印数量（调试用）
  console.log('count', count.value)
  // 将当前数量添加到数量数组
  myform.counts.push(count.value)
  // 控制台打印表单数据（调试用）
  console.log('表单数据', myform)
  
  // // 检查用户余额是否足够支付
  // if (Number(myform.account) >= Number(myform.totalAmount)) {
    // 调用创建订单接口
    post("/orders/createOrder",
        myform,
        // 接口成功回调
        content => {
          // 触发事件关闭弹窗
          emits('update:show', false)
          // 跳转到订单创建成功页面，并携带订单ID
          router.push({
            path: '/create-orders',
            query: { id: content }
          })
        },
        formObj) // 传入表单引用（可能用于验证）
  // } else {
  //   // 余额不足时显示确认框
  //   ElMessageBox.confirm( '您的余额不足，是否充值？', '警告', {
  //     cancelButtonText: '取消',
  //     confirmButtonText: '确定',
  //     type: 'warning'
  //   }).then(() => {
  //     // 用户确认后跳转到充值页面
  //     router.push('/recharge')
  //   })
  // }

}

// 加入购物车函数
function savecart() {
	// 调用添加到购物车接口
	post("/cart/add", 
		{ userId: myform.userId, goodsId: props.id, count: count.value }, 
		// 接口成功回调
		content => {
			// 如果返回内容不为true（表示商品已在购物车）
			if (content !== true) {
				// 显示确认框询问是否前往购物车
				ElMessageBox.confirm(
				    '该商品已在购物车中，是否移步购物车操作？',
				    {
				      confirmButtonText: '前往购物车',
				      cancelButtonText: '放弃',
				      type: 'warning',
				    }
				  )
				  .then(() => {
				  	// 用户确认后显示成功消息
				  	ElMessage({
				  	  type: 'success',
				  	  message: '为您前往购物车',
				  	})
				  	// 跳转到购物车页面
				    router.push({ name: 'CartIndex' })
				  })
				  .catch(() => {
				  	// 用户取消后显示提示消息
				    ElMessage({
				      type: 'info',
				      message: '您已放弃加购',
				    })
				  })
			}
			// 触发事件关闭弹窗
			emits('update:show', false)
			// 触发事件刷新数据
			emits('getDataById')
		},
		formObj) // 传入表单引用（可能用于验证）
}


</script>

<style scoped lang="scss">

</style>